import react , {useState} from 'react'
/* 
  useState:
    - 让函数式组件支持state状态
    - useState() 方法里面唯一的参数就是初始 state
    - useState返回一个只有两个元素的数组
      - 第一个元素是当前的 state 的值
      - 第二个元素是一个函数,用来替换原来state中的值,这个函数的修改state和setState一样是异步的
*/

export default function App() {
  const [count,setCount] = useState(0);
  const [isHot,setWer] = useState(true);
  const [person,setPerson] = useState([{name:"老六"},{name:18},{name:"男"}])

  const setCountHandle = () =>{
    setCount(count+1);
  }

  const setWerHandle = () =>{
    setWer(!isHot);
  }

  const setPersonHandle = () =>{
    setPerson([...person,{name:"老王"}])
  }

  return (
    <div>
      <h1>累加的值是{ count }</h1>
      <h3>今天天气真{ isHot ? "热啊" : "冷啊" }</h3>
      <button onClick = {setCountHandle}>累加</button>
      <button onClick = {setWerHandle}>切换天气</button>
      <hr/>
      <ul>
        {
          person.map( item => <li>{item.name}</li> )
        }
      </ul>
      <button onClick = {setPersonHandle}>添加数据</button>
    </div>
  );
}


